<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue 面试题 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/heima2020/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/heima2020/assets/css/0.styles.aa663799.css" as="style"><link rel="preload" href="/heima2020/assets/js/app.e2adc9d2.js" as="script"><link rel="preload" href="/heima2020/assets/js/2.7389c9d3.js" as="script"><link rel="preload" href="/heima2020/assets/js/36.3622a14c.js" as="script"><link rel="prefetch" href="/heima2020/assets/js/10.8b750e5f.js"><link rel="prefetch" href="/heima2020/assets/js/11.9224f975.js"><link rel="prefetch" href="/heima2020/assets/js/12.3ea117b6.js"><link rel="prefetch" href="/heima2020/assets/js/13.7524b74f.js"><link rel="prefetch" href="/heima2020/assets/js/14.cee0fcf8.js"><link rel="prefetch" href="/heima2020/assets/js/15.7a4a27f7.js"><link rel="prefetch" href="/heima2020/assets/js/16.947d882b.js"><link rel="prefetch" href="/heima2020/assets/js/17.79d3becb.js"><link rel="prefetch" href="/heima2020/assets/js/18.48208e3a.js"><link rel="prefetch" href="/heima2020/assets/js/19.3d0c49ef.js"><link rel="prefetch" href="/heima2020/assets/js/20.1f6114c8.js"><link rel="prefetch" href="/heima2020/assets/js/21.85e67b4a.js"><link rel="prefetch" href="/heima2020/assets/js/22.ce482f4d.js"><link rel="prefetch" href="/heima2020/assets/js/23.a150bd35.js"><link rel="prefetch" href="/heima2020/assets/js/24.8cd80d5d.js"><link rel="prefetch" href="/heima2020/assets/js/25.0001c7c1.js"><link rel="prefetch" href="/heima2020/assets/js/26.aa4d65a5.js"><link rel="prefetch" href="/heima2020/assets/js/27.baffff1d.js"><link rel="prefetch" href="/heima2020/assets/js/28.20430dcf.js"><link rel="prefetch" href="/heima2020/assets/js/29.7bbc3c04.js"><link rel="prefetch" href="/heima2020/assets/js/3.0076a912.js"><link rel="prefetch" href="/heima2020/assets/js/30.5f74696f.js"><link rel="prefetch" href="/heima2020/assets/js/31.a0bf56d6.js"><link rel="prefetch" href="/heima2020/assets/js/32.dd5a93dd.js"><link rel="prefetch" href="/heima2020/assets/js/33.92de7335.js"><link rel="prefetch" href="/heima2020/assets/js/34.bf468ed6.js"><link rel="prefetch" href="/heima2020/assets/js/35.28502be1.js"><link rel="prefetch" href="/heima2020/assets/js/37.626e17d3.js"><link rel="prefetch" href="/heima2020/assets/js/38.860020b8.js"><link rel="prefetch" href="/heima2020/assets/js/39.c092c283.js"><link rel="prefetch" href="/heima2020/assets/js/4.586af112.js"><link rel="prefetch" href="/heima2020/assets/js/40.a6ba2743.js"><link rel="prefetch" href="/heima2020/assets/js/41.43d70bcd.js"><link rel="prefetch" href="/heima2020/assets/js/42.6486a709.js"><link rel="prefetch" href="/heima2020/assets/js/43.670b256a.js"><link rel="prefetch" href="/heima2020/assets/js/44.eb371480.js"><link rel="prefetch" href="/heima2020/assets/js/45.5b45f11e.js"><link rel="prefetch" href="/heima2020/assets/js/46.bc59be94.js"><link rel="prefetch" href="/heima2020/assets/js/47.ec36fca9.js"><link rel="prefetch" href="/heima2020/assets/js/48.51e80f8f.js"><link rel="prefetch" href="/heima2020/assets/js/5.6eb7e243.js"><link rel="prefetch" href="/heima2020/assets/js/6.1b7d5a6d.js"><link rel="prefetch" href="/heima2020/assets/js/7.f611fe3c.js"><link rel="prefetch" href="/heima2020/assets/js/8.c14cc922.js"><link rel="prefetch" href="/heima2020/assets/js/9.cd5538bb.js">
    <link rel="stylesheet" href="/heima2020/assets/css/0.styles.aa663799.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/heima2020/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/heima2020/node/day01" class="sidebar-heading clickable open"><span>Node</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/heima2020/node/day01.html" class="sidebar-link">Node 第 1 天</a></li><li><a href="/heima2020/node/day02.html" class="sidebar-link">Node 第 2 天</a></li><li><a href="/heima2020/node/day03.html" class="sidebar-link">Node 第 3 天</a></li><li><a href="/heima2020/node/day04.html" class="sidebar-link">Node 第 4 天</a></li><li><a href="/heima2020/node/day05.html" class="sidebar-link">Node 第 5 天</a></li><li><a href="/heima2020/node/day06.html" class="sidebar-link">Node 第 6 天</a></li><li><a href="/heima2020/node/day07.html" class="sidebar-link">Node 第 7 天</a></li><li><a href="/heima2020/node/day08.html" class="sidebar-link">Node 第 8 天</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue-面试题"><a href="#vue-面试题" class="header-anchor">#</a> Vue 面试题</h1> <h2 id="vue-基本使用-章节"><a href="#vue-基本使用-章节" class="header-anchor">#</a> Vue 基本使用 - 章节</h2> <h3 id="vue-cli"><a href="#vue-cli" class="header-anchor">#</a> Vue-cli</h3> <ul><li>Vue-cli</li></ul> <h3 id="基本使用"><a href="#基本使用" class="header-anchor">#</a> 基本使用</h3> <ul><li>模板（插槽，指令）</li> <li>computed 和 watch</li> <li>class 和 style</li> <li>条件</li> <li>循环</li> <li>事件</li> <li>表单</li></ul> <h3 id="组件"><a href="#组件" class="header-anchor">#</a> 组件</h3> <ul><li>生命周期</li> <li>props（类型和默认值）</li> <li>v-on 和 $emit</li> <li>自定义事件</li></ul> <h3 id="高级特性"><a href="#高级特性" class="header-anchor">#</a> 高级特性</h3> <ul><li>自定义 v-model</li> <li>$nextTick</li> <li>ref</li> <li>slot</li> <li>动态组件</li> <li>异步组件</li> <li>keep-alive</li> <li>mixin</li></ul> <h2 id="vue-周边工具"><a href="#vue-周边工具" class="header-anchor">#</a> Vue 周边工具</h2> <h3 id="vuex"><a href="#vuex" class="header-anchor">#</a> Vuex</h3> <ul><li>state</li> <li>getters</li> <li>action</li> <li>mutation</li> <li>用于 Vue
<ul><li>dispatch</li> <li>commit</li> <li>mapState</li> <li>mapGetters</li> <li>mapActions</li> <li>mapMutations</li></ul></li></ul> <h3 id="vue-router"><a href="#vue-router" class="header-anchor">#</a> Vue-Router</h3> <ul><li>动态路由</li> <li>to 和 push</li> <li>hash 和 history</li> <li>懒加载（配合动态组件）</li></ul> <h2 id="vue-原理"><a href="#vue-原理" class="header-anchor">#</a> Vue 原理</h2> <ul><li>组件化和 MVVM</li> <li>响应式原理</li> <li>vdom 和 diff 算法</li> <li>模板编译</li> <li>组件渲染过程</li> <li>前端路由</li></ul> <h2 id="vue3"><a href="#vue3" class="header-anchor">#</a> Vue3</h2> <ul><li>Proxy 响应式</li></ul> <h1 id="react-面试题"><a href="#react-面试题" class="header-anchor">#</a> React 面试题</h1> <h2 id="基本使用-2"><a href="#基本使用-2" class="header-anchor">#</a> 基本使用</h2> <h3 id="create-react-app"><a href="#create-react-app" class="header-anchor">#</a> create-react-app</h3> <h3 id="基本用法"><a href="#基本用法" class="header-anchor">#</a> 基本用法</h3> <ul><li>JSX 语法</li> <li>条件渲染</li> <li>列表渲染</li> <li>事件</li> <li>组件和 props (类型检查)</li> <li>state 和 setState</li> <li>组件生命周期</li></ul> <h3 id="高级用法"><a href="#高级用法" class="header-anchor">#</a> 高级用法</h3> <ul><li>函数组件</li> <li>受控和非受控组件</li> <li>refs</li> <li>Protals</li> <li>context</li> <li>异步组件</li></ul> <h2 id="react-周边工具"><a href="#react-周边工具" class="header-anchor">#</a> React 周边工具</h2> <h3 id="redux"><a href="#redux" class="header-anchor">#</a> redux</h3> <ul><li>store</li> <li>reducer</li> <li>action</li> <li>dispatch</li> <li>单向数据流模型</li> <li>中间件 redux-thunk 和 redux-saga</li></ul> <h3 id="react-redux"><a href="#react-redux" class="header-anchor">#</a> react-redux</h3> <ul><li>provider</li> <li>connect</li> <li>mapStateToProps</li> <li>mapDispatchToProps</li></ul> <h3 id="react-router"><a href="#react-router" class="header-anchor">#</a> react-router</h3> <ul><li>react-router</li></ul> <h2 id="react原理"><a href="#react原理" class="header-anchor">#</a> React原理</h2> <ul><li>函数式编程</li> <li>vdom 和 diff 算法</li> <li>JSX 本质</li> <li>合成事件</li> <li>setState 和 batchUpdate</li> <li>组件渲染过程</li> <li>前端路由</li></ul> <h1 id="webpack-和-babel"><a href="#webpack-和-babel" class="header-anchor">#</a> Webpack 和 Babel</h1> <h2 id="基本使用-3"><a href="#基本使用-3" class="header-anchor">#</a> 基本使用</h2> <ul><li>安装配置</li> <li>dev-server</li> <li>解析 ES6</li> <li>解析样式</li> <li>解析图片文件</li> <li>常见 loader 和 plugin</li></ul> <h2 id="高级特性-2"><a href="#高级特性-2" class="header-anchor">#</a> 高级特性</h2> <ul><li>多入口</li> <li>抽离和压缩 css</li> <li>抽离公共代码</li> <li>懒加载</li> <li>处理 React 和 Vue</li></ul> <h2 id="性能优化"><a href="#性能优化" class="header-anchor">#</a> 性能优化</h2> <ul><li><p>优化构建速度</p> <ul><li>优化 babel-loader</li> <li>ignorePlugin</li> <li>noParse</li> <li>happyPack</li> <li>ParalleUglifyPlugin</li> <li>自动刷新</li> <li>热更新</li> <li>Dllplugin</li></ul></li> <li><p>优化产出代码</p> <ul><li>使用生产环境</li> <li>小图片 base64 编码</li> <li>bundle 和 hash</li> <li>使用 CDN</li> <li>提取公共代码</li> <li>懒加载</li> <li>scope hosting</li></ul> <h2 id="babel"><a href="#babel" class="header-anchor">#</a> Babel</h2> <h3 id="polyfill"><a href="#polyfill" class="header-anchor">#</a> polyfill</h3> <h3 id="runtime"><a href="#runtime" class="header-anchor">#</a> runtime</h3></li></ul> <h1 id="项目设计"><a href="#项目设计" class="header-anchor">#</a> 项目设计</h1> <h2 id="todo-list"><a href="#todo-list" class="header-anchor">#</a> todo-list</h2> <ul><li>React 简版</li> <li>React 复杂版</li></ul> <h2 id="购物车"><a href="#购物车" class="header-anchor">#</a> 购物车</h2> <ul><li>Vue 简版</li> <li>Vue 复杂版</li></ul> <h2 id="设计要点"><a href="#设计要点" class="header-anchor">#</a> 设计要点</h2> <ul><li>组件结构设计</li> <li>数据结构设计</li></ul> <h1 id="项目研发流程"><a href="#项目研发流程" class="header-anchor">#</a> 项目研发流程</h1> <h2 id="主要阶段"><a href="#主要阶段" class="header-anchor">#</a> 主要阶段</h2> <ul><li>需求分析</li> <li>技术方案设计</li> <li>开发</li> <li>联调</li> <li>测试</li> <li>上线（和回滚）</li> <li>项目总结</li></ul> <h2 id="各个阶段的常见问题和解答"><a href="#各个阶段的常见问题和解答" class="header-anchor">#</a> 各个阶段的常见问题和解答</h2></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/heima2020/assets/js/app.e2adc9d2.js" defer></script><script src="/heima2020/assets/js/2.7389c9d3.js" defer></script><script src="/heima2020/assets/js/36.3622a14c.js" defer></script>
  </body>
</html>
